<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <textarea cols="30" rows="10" @keyup="copyContent($event)"></textarea>
        <hr>
        <!-- 修饰符：v-on事件绑定中，修饰符主要用于限制事件的触发条件 -->
        <!-- .{keyCode(字符的编码) | keyAlias(按键的别名) }
            1、按键修饰符（键盘按键&鼠标按键）：描述键盘事件或者鼠标事件被哪些对应的按键触发
            .a、.b、.c……
            .enter .tab .delete(退格键&删除键) .esc .space .up .down .left .right
            ->下面的修饰符被 vue 认为是系统 修饰符
            .ctrl .alt .shift .meta(Mac 系统下的 command)
        -->
        <input type="text" @keyup.a="printCode($event)">
        <input type="text" @keyup.65="printCode($event)">
        <input type="text" @keyup.delete="printCode($event)">
        <input type="text" @keyup.backspace="printCode($event)">
        <input type="text" @keyup.46="printCode($event)">
        <!-- 
            修饰符可以连写
            常规修饰连写表示 || 或者关系
        -->
        <input type="text" @keyup.a.b.c.d="printCode($event)">
        <!-- 特殊修饰构建时，会完成 && 并且关系 -->
        <input type="text" @keyup.ctrl.c="printCode($event)">
        <input type="text" @keyup.c.ctrl="printCode($event)">
        <!-- (ctrl&&a)||(ctrl&&b)…… -->
        <input type="text" @keyup.ctrl.a.b.c="printCode($event)">
        <input type="text" @keyup.shift.a.b.c="printCode($event)">
        <hr>
        <!-- 
            鼠标按键：left right middle
        -->
        <input type="button" value="鼠标事件" @mouseup.right="printCode">
        <input type="button" value="鼠标事件+ctrl" @mouseup.ctrl.right="printCode">
        <hr>
        <!--
            2、功能修饰符
                .once .exact 
                .stop 阻止事件冒泡行为 event.stopPropagation()
                .self 被该修饰符修饰的事件 只能在当前元素触发时执行
                .capture 事件捕获行为 （冒泡现象的反向结果）
                .prevent 阻止事件或标签的默认行为 event.preventDefault()
        -->
        <input type="button" value="一次性事件修饰符" @click.once="printFun">
        <input type="button" value="精准修饰符" @click.ctrl="printFun">
        <input type="button" value="精准修饰符" @click.ctrl.exact="printFun">
        <!-- 只能在没有系统按键按下时，执行点击方法 -->
        <input type="button" value="精准修饰符" @click.exact="printFun">
        <hr>
        <div style="width: 400px;height: 400px; border: 1px solid black;" @click="printName('div1')">
            div1
            <div style="width: 300px;height: 300px; border: 1px solid black;" @click.stop="printName('div2')">
                div2
                <div style="width: 200px;height: 200px; border: 1px solid black;" @click.self="printName('div3')">
                    div3
                    <div style="width: 100px;height: 100px; border: 1px solid black;" @click="printName('div4')">div4
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div style="width: 400px;height: 400px; border: 1px solid black;" @click.capture.stop="printName('div1')">
            div1
            <div style="width: 300px;height: 300px; border: 1px solid black;" @click.capture="printName('div2')">
                div2
                <div style="width: 200px;height: 200px; border: 1px solid black;" @click="printName('div3')">
                    div3
                    <div style="width: 100px;height: 100px; border: 1px solid black;" @click="printName('div4')">div4
                    </div>
                </div>
            </div>
        </div>
        <!-- 
            事件代理|事件委托：提供浏览器动态事件性能提升操作
            1、无需关心元素数量，只用完成一次事件绑定操作即可实现动态事件加载
            2、因为只完成一次事件绑定，所以不会过度消耗浏览器性能
            实现原理：事件冒泡或者事件捕获
        -->
        <ul @click.capture.stop="printLiContent($event)">
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
            <li>li4</li>
            <li>li5</li>
            <li>li6</li>
            <li>li7</li>
            <li>li8</li>
            <li>li9</li>
            <li>li10</li>
        </ul>
        <hr>
        <button @contextmenu.prevent="printFunA()">右键菜单</button>
        <!-- vue事件绑定可以不定义回调函数，这种绑定方式多用于功能修饰符的调用 -->
        <a href="https://www.baidu.com" @click.prevent>baidu</a>

    </div>
</body>
<script>
    new Vue({
        el: "#app",
        methods: {
            copyContent(e) {
                if (e.ctrlKey && e.key == "c") {
                    console.log("复制成功：", e);
                }
            },
            printCode(e) {
                console.log(e.key, e.code, e.keyCode, e);
            },
            printFun(e) {
                console.log("方法执行", e);
            },
            printName(name) {
                console.log("dive名称：", name);
            },
            printLiContent(e) {
                console.log("ul事件", e.target)
            },
            printFunA() {
                console.log("右键菜单别调用")
            }
        }
    })
</script>

</html>